<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h1 {
        text-align: center;
    }

    /* 表格样式 */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #ddd;
        /* 边框 */
        padding: 8px;
        /* 单元格内边距 */
        text-align: center;
        /* 左对齐 */
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }
</style>

<body id="app">
    <div>
        <h1>用户数据表</h1>
    </div>

    <div>
        <a href="localhost:8080/request">点击</a>
        <input type="button" value="提交" v-on:click="select">
    </div>

    <div >
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>最后更新时间</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                <tr v-for="(user, index) in users" :key="user.id">
                    <td>{{user.id}}</td>
                    <td>{{user.admin}}</td>
                    <td>{{user.passwd}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                    <td>{{user.entryDate}}</td>

                </tr>

            </tbody>
        </table>
    </div>


    <script src="./js/axios.js"></script>
    <script>
        import { createApp } from 'vue'


        createApp({
            data() {
                return {
                    users: [ 
                        { id: 1, admin: "admin", passwd: "123456", name: "张三", age: 18, entryDate: "2021-01-01" },
                        { id: 2, admin: "admin", passwd: "123456", name: "张三", age: 18, entryDate: "2021-01-01" },
                        { id: 3, admin: "admin", passwd: "123456", name: "张三", age:52, entryDate: "2021-01-01" }
                    ]
                }
            },

            methods: {
                select() {
                    axios.get('http://localhost:8080/request').then((result) => {
                        alert("aag")
                        console.log(result);
                        this.users = result.data;

                    }).catch((err) => {

                    });
                }
            }


        }).mount('#app')

    </script>

</body>

</html>